<template>
  <el-tabs v-model="tabsActiveName" tab-position="left">
    <el-tab-pane label="登录记录" name="loginLog">
      <TablePageContainer v-if="tabsActiveName === 'loginLog'" :is-show-card="false">
        <template #table>
          <el-table v-loading="loginLog.loading" class="w_100" :data="loginLog.data" border stripe>
            <el-table-column prop="client.name" label="登录应用" align="center" />
            <el-table-column prop="ipAddress" label="登录地址" align="center" />
            <el-table-column prop="geoLocation" label="登录地点" align="center" />
            <el-table-column prop="deviceInfo" label="登录设备" align="center" />
            <el-table-column prop="browserInfo" label="浏览器" align="center" />
            <el-table-column label="登录时间" align="center" sortable>
              <template slot-scope="scope">
                {{ parseTime(scope.row.loginTime) }}
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template #page>
          <Pagination :total.sync="loginLog.total" :page.sync="loginLog.params.pageNum" :limit.sync="loginLog.params.pageSize" @pagination="getLoginLogList" />
        </template>
      </TablePageContainer>
    </el-tab-pane>
    <el-tab-pane label="操作记录" name="operationLog">
      <TablePageContainer v-if="tabsActiveName === 'operationLog'" :is-show-card="false">
        <template #table>
          <el-table v-loading="operateLog.loading" class="w_100" :data="operateLog.data" border stripe>
            <el-table-column prop="module" label="操作模块" align="center" />
            <el-table-column prop="action" label="操作动作" align="center" />
            <el-table-column prop="ipAddress" label="登录地址" align="center" />
            <el-table-column prop="geoLocation" label="登录地点" align="center" />
            <el-table-column prop="deviceInfo" label="登录设备" align="center" />
            <el-table-column prop="browserInfo" label="浏览器" align="center" />
            <el-table-column label="操作时间" align="center" sortable>
              <template slot-scope="scope">
                {{ parseTime(scope.row.operateTime) }}
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template #page>
          <Pagination :total.sync="operateLog.total" :page.sync="operateLog.params.pageNum" :limit.sync="operateLog.params.pageSize" @pagination="getOperateLogList" />
        </template>
      </TablePageContainer>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { parseTime } from '@/utils'
import { getPageByCurrentLogin as getLoginLogPage } from '@/api/system/logs/loginLog'
import { getPageByCurrentLogin as getOperateLogPage } from '@/api/system/logs/operateLog'

export default {
  name: 'Logs',
  components: {
    TablePageContainer: () => import('@/components/TablePageContainer'),
    Pagination: () => import('@/components/Pagination')
  },
  data() {
    return {
      tabsActiveName: 'loginLog',
      loginLog: {
        params: {
          pageNum: 1,
          pageSize: 10
        },
        loading: false,
        data: [],
        total: 0
      },
      operateLog: {
        params: {
          pageNum: 1,
          pageSize: 10
        },
        loading: false,
        data: [],
        total: 0
      }
    }
  },
  mounted() {
    this.getLoginLogList()
    this.getOperateLogList()
  },
  methods: {
    parseTime,
    getLoginLogList() {
      getLoginLogPage(this.loginLog.params).then(res => {
        this.loginLog.data = res.data.records
        this.loginLog.total = res.data.total
        this.loginLog.loading = false
      })
    },
    getOperateLogList() {
      getOperateLogPage(this.operateLog.params).then(res => {
        this.operateLog.data = res.data.records
        this.operateLog.total = res.data.total
        this.operateLog.loading = false
      })
    }

  }
}
</script>

<style scoped lang="scss">

::v-deep.el-tabs {
  @import '@/styles/variables';

  .el-tabs__active-bar {
    display: none;
  }

  .is-left::after {
    content: none !important;
  }

  .el-tabs__item {
    height: 35px;
    line-height: 35px;
    margin-top: 10px;
    border-radius: 5px;
    background: $menuHover !important;
    transition: background-color 0.3s;
  }

  .el-tabs__nav {
    .is-active {
      color: $menuActiveText !important;
      background: $menuActiveBg !important;
    }
  }
}

</style>
